{% extends 'layout.html' %}
 {% block title %}
    用户登录
{% endblock %}
{% block css %}
<style>
    .container{
        width: 600px;
        padding: 40px 80px;
        margin: 20px auto;
        border: 1px solid #ccc;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
        border-radius: 20px;
    }
    .code{
        display: flex;
    }
    .code .in{
        margin-right: 5px;
    }
    .err-msg{
        color: red;
        position: absolute;
    }
    .footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
{% endblock%}

{% block content %}
<h2 style="text-align: center">密码登录</h2>
    <div class="container">
     <form novalidate id="form" >
         {% csrf_token %}
         {% for item in form %}
            <div class="form-group">
                    {% if item.name == 'code' %}
                         <div class="form-group">
                            <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                            <div  class="code">
                                <div class="in">
                                    {{ item }}
                                    <span class="err-msg"></span>
                                </div>
                                <img src="{% url 'web:code' %}" alt="点击获取验证码" id="code_id" style="height:40px; cursor: pointer">
                            </div>

                          </div>
                    {% else %}
                     <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                        {{ item }}
                      <span class="err-msg"></span>
                    {% endif %}
                  </div>
         {% endfor %}
         <div class="footer">
             <button class="btn btn-primary" id="login">登录</button>
             <a href="javascript:;">忘记密码?</a>
         </div>


        </form>
    </div>
{% endblock%}

{% block js %}
<script>
    //获取验证码
    function getCode(){
        const btn=document.querySelector('#code_id')
        btn.addEventListener('click', ()=>{
           let hh=btn.getAttribute('src')
           btn.setAttribute('src',hh+'?')
        })
    }
    getCode()
    //登录按钮
    function login(){
        const loginBtn=document.querySelector('#login')
        loginBtn.addEventListener('click',async (e)=>{
            e.preventDefault()
            let form=document.querySelector('#form')
            let formData=new FormData(form)
            const data=await fetch('{% url "web:login" %}',{
                method:'post',
                body:formData
            })
            const res=await data.json()
            if(res.code==200){
                window.location.href=res.data
            }else{
                 for(let item in res.error){
                     console.log(item)
                     let doc=document.querySelector(`#id_${item}`)
                     console.log(doc)
                     doc.nextElementSibling.innerText=res.error[item][0]
                 }
            }
        })
    }
    login()
</script>
{% endblock%}